<template>
  <div>
    <el-dialog
      :close-on-click-modal="false"
      modal-append-to-body
      lock-scroll
      top="10%"
      :title="$t('config.agent.bacthEditAgent')"
      :visible.sync="dialogVisible"
      @close="close"
      width="50%"
    >
      <p class="bacthTip">{{ $t('config.agent.bacthEditAgentTip', { total: total }) }}</p>
      <affix :label="$t('agentSetting.agentSetting10')"></affix>
      <el-form :model="form" ref="form" label-position="top" label-width="80px">
        <el-form-item :label="$t('config.agent.belongToDept')">
          <dept
            v-if="isBacth"
            ref="ownerSelect"
            :placeholder="$t('config.agent.pleaseDept')"
            :addDepts="depts"
            :dept="form.deptId"
            @deptChange="deptChange"
          ></dept>
        </el-form-item>
        <el-form-item class="search">
          <el-button class="primary_btn" @click="close">{{ $t('public.cancel') }}</el-button>
          <el-button type="primary" @click="onSubmit('dept')" class="primary_btn">{{ $t('public.save') }}</el-button>
        </el-form-item>
        <affix :label="$t('agentSetting.agentSetting12')"></affix>
        <el-form-item :label="$t('config.agent.parentAgent')">
          <agent-select
            :placeholder="$t('config.agent.pleaseParentAgent')"
            @agentChange="agentChange"
            :customfield="customize"
            :agent="form.parentId"
            ref="agnetSelect"
          >
          </agent-select>
        </el-form-item>
        <el-form-item class="search">
          <el-button class="primary_btn" @click="close">{{ $t('public.cancel') }}</el-button>
          <el-button type="primary" @click="onSubmit('parentId')" class="primary_btn">{{
            $t('public.save')
          }}</el-button>
        </el-form-item>
        <affix :label="$t('agentSetting.agentSetting11')"></affix>
        <el-radio-group v-model="radio2">
          <el-radio :label="3">{{ $t('agentSetting.agentSetting13') }}</el-radio>
          <el-radio :label="6">{{ $t('agentSetting.agentSetting14') }}</el-radio>
        </el-radio-group>
        <!-- 角色组件 -->
        <el-form-item :label="$t('config.agent.modifyRole')" prop="role">
          <role-transfer-new :rolesId="rolesId" ref="roleChild"> </role-transfer-new>
        </el-form-item>
        <!-- <el-form-item :label="$t('config.agent.modifyRole')" prop="role">
            <role-transfer
              :rolesId = "rolesId"
              ref = "child">
            </role-transfer>
          </el-form-item> -->
        <el-form-item class="search">
          <el-button class="primary_btn" @click="close">{{ $t('public.cancel') }}</el-button>
          <el-button type="primary" @click="onSubmit('role')" class="primary_btn">{{ $t('public.save') }}</el-button>
        </el-form-item>
        <affix :label="$t('agentSetting.agentSetting15')"></affix>
        <el-row>
          <el-col :span="11">
            <el-form-item :label="$t('config.agent.imAgentStatusInit')">
              <el-radio class="radio" v-model="form.imClaimStatus" :label="'open'">{{
                $t('config.agent.onlineStatus')
              }}</el-radio>
              <el-radio class="radio" v-model="form.imClaimStatus" :label="'close'">{{
                $t('config.agent.busyStatus')
              }}</el-radio>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="2"> &nbsp;</el-col>
          <el-col :span="11">
            <el-form-item :label="$t('config.agent.automaticStatusInit')">
              <el-radio class="radio" v-model="form.autoOrderInitStatus" :label="'order'">{{
                $t('config.agent.orderStatus')
              }}</el-radio>
              <el-radio class="radio" v-model="form.autoOrderInitStatus" :label="'busy'">{{
                $t('config.agent.busyStatus')
              }}</el-radio>
            </el-form-item>
          </el-col> -->
        </el-row>
        <el-form-item :label="$t('config.agent.emailClaimStatus')">
          <el-radio class="radio" v-model="form.emailClaimStatus" :label="'open'">{{
            $t('config.agent.open')
          }}</el-radio>
          <el-radio class="radio" v-model="form.emailClaimStatus" :label="'close'">{{
            $t('config.agent.close')
          }}</el-radio>
        </el-form-item>
        <el-form-item :label="$t('config.agent.minImDealCount')">
          <!-- <el-select v-model="form.minImDealCount" size="mini">
              <el-option
                v-for="item in minNumber"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select> -->
          <el-input v-model.trim="form.minImDealCount" size="mini"></el-input>
        </el-form-item>
        <el-form-item :label="$t('config.agent.maxImDealCount')">
          <!-- <el-select v-model="form.maxImDealCount" size="mini">
              <el-option
                v-for="item in maxNumber"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select> -->
          <el-input v-model.trim="form.maxImDealCount" size="mini"></el-input>
        </el-form-item>
        <el-form-item :label="$t('config.agent.maxEmailDealCount')">
          <el-input
            v-model.trim="form.maxEmailDealCount"
            :placeholder="$t('config.agent.defaultTen')"
            size="mini"
          ></el-input>
        </el-form-item>
        <el-form-item class="search">
          <el-button class="primary_btn" @click="close">{{ $t('public.cancel') }}</el-button>
          <el-button type="primary" @click="onSubmit('imDealCount')" class="primary_btn">{{
            $t('public.save')
          }}</el-button>
        </el-form-item>
        <affix :label="$t('agentSetting.agentSetting16')"></affix>
        <el-form-item :label="$t('config.agent.allowLandingMode')">
          <el-checkbox v-model="form.localLoginWay">{{ $t('config.agent.localLoginWay') }}</el-checkbox>
          <el-checkbox v-model="form.gatewayLoginWay">{{ $t('config.agent.gatewayLoginWay') }}</el-checkbox>
          <el-checkbox v-model="form.sipLoginWay">{{ $t('config.agent.onLineServer') }} </el-checkbox>
          <el-checkbox v-model="form.appLoginWay">{{ $t('config.agent.appLoginWay') }}</el-checkbox>
          <el-checkbox v-model="form.weChatAssistantLoginWay">{{ $t('agentSetting.agentSetting6') }}</el-checkbox>
          <span
            >(<span class="unbind" @click="batchCancelWechatHelperBind">{{ $t('agentSetting.agentSetting8') }}</span
            >)</span
          >
        </el-form-item>
        <el-form-item class="search">
          <el-button class="primary_btn" @click="close">{{ $t('public.cancel') }}</el-button>
          <el-button type="primary" @click="onSubmit('loginWay')" class="primary_btn">{{
            $t('public.save')
          }}</el-button>
        </el-form-item>
        <affix :label="$t('agentSetting.agentSetting17')"></affix>
        <el-form-item :label="$t('config.agent.isSoftphoneDial')">
          <el-radio class="radio" v-model="form.closeSoftphoneDial" :label="false">{{ $t('public.yes') }}</el-radio>
          <el-radio class="radio" v-model="form.closeSoftphoneDial" :label="true">{{ $t('public.no') }}</el-radio>
        </el-form-item>
        <el-form-item class="search">
          <el-button class="primary_btn" @click="close">{{ $t('public.cancel') }}</el-button>
          <el-button type="primary" @click="onSubmit('closeSoftphoneDial')" class="primary_btn">{{
            $t('public.save')
          }}</el-button>
        </el-form-item>
        <affix :label="$t('agentSetting.agentSetting70')"></affix>
        <el-form-item :label="$t('config.agent.callautobusy')">
          <el-radio class="radio" v-model="form.CallInAutoBusy" :label="true">{{ $t('public.yes') }}</el-radio>
          <el-radio class="radio" v-model="form.CallInAutoBusy" :label="false">{{ $t('public.no') }}</el-radio>
        </el-form-item>
        <p v-show="form.CallInAutoBusy">
          {{ $t('config.agent.callInAutoBusyCount1')
          }}<el-input
            v-model="form.CallInAutoBusyCount"
            @input="CallInAutoBusyCountInput"
            type="number"
            style="width: 70px"
          ></el-input
          >{{ $t('config.agent.callInAutoBusyCount2') }}
        </p>
        <el-form-item class="search">
          <el-button class="primary_btn" @click="close">{{ $t('public.cancel') }}</el-button>
          <el-button type="primary" @click="onSubmit('CallInAutoBusy')" class="primary_btn">{{
            $t('public.save')
          }}</el-button>
        </el-form-item>
        <affix :label="$t('agentSetting.agentSetting69')"></affix>
        <el-form-item :label="$t('config.agent.isWebSoftTelephone')">
          <el-radio class="radio" v-model="form.webSoftTelephone" :label="true">{{ $t('public.yes') }}</el-radio>
          <el-radio class="radio" v-model="form.webSoftTelephone" :label="false">{{ $t('public.no') }}</el-radio>
        </el-form-item>
        <el-form-item class="search">
          <el-button class="primary_btn" @click="close">{{ $t('public.cancel') }}</el-button>
          <el-button type="primary" @click="onSubmit('webSoftTelephone')" class="primary_btn">{{
            $t('public.save')
          }}</el-button>
        </el-form-item>
        <affix :label="$t('agentSetting.agentSetting18')"></affix>
        <el-form-item :label="$t('agentSetting.agentSetting19')">
          <el-input :placeholder="$t('agentSetting.agentSetting20')" v-model="form.AutoBusyTime">
            <template slot="append">{{ $t('public.seconds') }}</template>
          </el-input>
        </el-form-item>
        <el-form-item class="search">
          <el-button class="primary_btn" @click="close">{{ $t('public.cancel') }}</el-button>
          <el-button type="primary" @click="onSubmit('AutoBusyTime')" class="primary_btn">{{
            $t('public.save')
          }}</el-button>
        </el-form-item>
        <affix :label="$t('agentSetting.agentSetting21')"></affix>
        <el-form-item :label="$t('config.agent.callTodoWebchatSwitch')">
          <el-radio class="radio" v-model="form.callIngWebchatSwitch" :label="'yes'">{{ $t('public.yes') }}</el-radio>
          <el-radio class="radio" v-model="form.callIngWebchatSwitch" :label="'no'">{{ $t('public.no') }}</el-radio>
        </el-form-item>
        <el-form-item class="search">
          <el-button class="primary_btn" @click="close">{{ $t('public.cancel') }}</el-button>
          <el-button type="primary" @click="onSubmit('webchatSwitch')" class="primary_btn">{{
            $t('public.save')
          }}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import affix from '@/components/ui-modules/affix/Affix.vue'
import Dept from '@/components/public-modules/cache/Dept'
import AgentSelect from '@/components/public-modules/cache/AgentSelect'
// import RoleTransfer from '@/components/public-modules/cache/RoleTransfer'
import RoleTransferNew from '@/components/public-modules/cache/RoleTransferNew'
import { deepClone } from '@/utils/m7Utils.js'
export default {
  name: 'BacthEditAgentInfo',
  data() {
    return {
      radio2: 3,
      dialogVisible: false,
      rolesId: [],
      minNumber: [],
      maxNumber: [],
      customize: [],
      depts: [
        {
          label: this.$t('public.pleasePick1'),
          value: ''
        }
      ],
      form: {
        AutoBusyTime: '',
        minImDealCount: '1',
        maxImDealCount: '1',
        maxEmailDealCount: '',
        imClaimStatus: 'open',
        // autoOrderInitStatus: 'order',
        emailClaimStatus: 'close',
        gatewayLoginWay: true,
        localLoginWay: true,
        sipLoginWay: true,
        appLoginWay: true,
        weChatAssistantLoginWay: true,
        deptId: '',
        parentId: '',
        callIngWebchatSwitch: 'yes',
        closeSoftphoneDial: false,
        CallInAutoBusy: false,
        CallInAutoBusyCount: 3,
        webSoftTelephone: false
      },
      form1: {}
    }
  },
  props: {
    isBacth: Boolean,
    total: Number
  },
  watch: {
    isBacth() {
      this.dialogVisible = this.isBacth
    }
  },
  methods: {
    batchCancelWechatHelperBind() {
      let text = this.$t('agentSetting.agentSetting22')
      this.$confirm(text, this.$t('public.tip'), {
        confirmButtonText: this.$t('public.confirm'),
        cancelButtonText: this.$t('public.cancel'),
        type: 'warning',
        cancelButtonClass: 'primary_btn',
        confirmButtonClass: 'primary_btn'
      }).then(() => {
        let data = {
          query: deepClone(this.$store.state.config.agentConfig.queryAgent)
        }
        delete data.query.page
        delete data.query.limit
        this.$emit('batchCancelWechatHelperBind', data)
      })
    },
    eeroTip(msg) {
      this.$message.error(msg)
    },
    onSubmit(type) {
      let data = {
        query: deepClone(this.$store.state.config.agentConfig.queryAgent),
        set: {
          flag: type
        },
        total: this.total
      }
      delete data.query.page
      delete data.query.limit
      if (type === 'dept') {
        data.set.deptId = this.form.deptId
      } else if (type === 'AutoBusyTime') {
        if (this.total > 1000) {
          this.$message.error(this.$t('config.agent.AutoBusyTimeBatchMoreThan1000'))
          return
        }
        let greatZero = /^\+?\d*$/
        if (this.form.AutoBusyTime && !greatZero.test(this.form.AutoBusyTime)) {
          this.$message.error(this.$t('config.agent.AutoBusyTimeErro'))
          return
        }
        data.set.AutoBusyTime = this.form.AutoBusyTime || '0'
      } else if (type === 'parentId') {
        data.set.parentId = this.form.parentId
      } else if (type === 'role') {
        if (this.$refs.roleChild.selected.length === 0) {
          this.eeroTip(this.$t('config.agent.pleaseRole'))
          return
        }
        data.set.role = this.$refs.roleChild.selected
        if (this.radio2 === 3) {
          data.set.flag = 'roleAdd'
        } else {
          data.set.flag = 'role'
        }
      } else if (type === 'loginWay') {
        data.set.gatewayLoginWay = this.form.gatewayLoginWay
        data.set.localLoginWay = this.form.localLoginWay
        data.set.sipLoginWay = this.form.sipLoginWay
        data.set.appLoginWay = this.form.appLoginWay
        data.set.weChatAssistantLoginWay = this.form.weChatAssistantLoginWay
      } else if (type === 'imDealCount') {
        // 判断座席最大能同时处理邮件数输入是否为正整数，座席最大能同时接待会话是否大于座席最小能同时接待会话
        let isPositiveNum = /^[0-9]*[1-9][0-9]*$/
        let numberTest = /^[1-9]\d*$/
        if (!numberTest.test(this.form.minImDealCount) || !numberTest.test(this.form.maxImDealCount)) {
          this.eeroTip(this.$t('config.agent.imDealErroTip2'))
          return
        } else if (parseInt(this.form.minImDealCount) > parseInt(this.form.maxImDealCount)) {
          this.eeroTip(this.$t('config.agent.imDealErroTip'))
          return
        } else if (parseInt(this.form.minImDealCount) > 200 || parseInt(this.form.maxImDealCount) > 200) {
          this.eeroTip(this.$t('config.agent.imDealErroTip2'))
          return
        } else if (this.form.maxEmailDealCount && !isPositiveNum.test(this.form.maxEmailDealCount)) {
          this.eeroTip(this.$t('config.agent.EmailDealErroTip'))
          return
        }
        data.set.minImDealCount = this.form.minImDealCount
        data.set.maxImDealCount = this.form.maxImDealCount
        data.set.imClaimStatus = this.form.imClaimStatus
        // data.set.autoOrderInitStatus = this.form.autoOrderInitStatus
        data.set.emailClaimStatus = this.form.emailClaimStatus
        data.set.maxEmailDealCount = this.form.maxEmailDealCount
      } else if (type === 'webchatSwitch') {
        data.set.callIngWebchatSwitch = this.form.callIngWebchatSwitch
      } else if (type === 'closeSoftphoneDial') {
        data.set.closeSoftphoneDial = this.form.closeSoftphoneDial
      } else if (type === 'webSoftTelephone') {
        data.set.webSoftTelephone = this.form.webSoftTelephone
      } else if (type === 'CallInAutoBusy') {
        data.set.CallInAutoBusy = this.form.CallInAutoBusy
        data.set.CallInAutoBusyCount = this.form.CallInAutoBusyCount
      }
      this.$emit('BacthEditAgentInfo', data)
      // console.log(data)
    },
    getRoleIds(arr) {
      let ids = []
      arr.map((item) => {
        ids.push(item.value)
      })
      return ids
    },
    // 获取上级ID
    agentChange(name) {
      this.form.parentId = name
    },
    // 获取部门ID
    deptChange(dept) {
      this.form.deptId = dept
    },
    // 关闭批量修改dialog
    close() {
      this.$emit('close')
      this.init()
    },
    // 初始化批量修改条件
    init() {
      this.form.AutoBusyTime = ''
      this.form.minImDealCount = '1'
      this.form.maxImDealCount = '1'
      this.form.maxEmailDealCount = ''
      this.form.imClaimStatus = 'open'
      // this.form.autoOrderInitStatus = 'order'
      this.form.emailClaimStatus = 'close'
      this.form.gatewayLoginWay = true
      this.form.localLoginWay = true
      this.form.sipLoginWay = true
      this.form.appLoginWay = true
      this.form.weChatAssistantLoginWay = true
      this.form.deptId = ''
      this.form.parentId = ''
      this.form.callIngWebchatSwitch = 'yes'
      this.$refs.roleChild.selected = []
      // this.form.CallInAutoBusy = false
      // this.form.CallInAutoBusyCount = 3
    },
    // 循环座席能同时接待会话数
    forNumber(num, obj) {
      for (let i = 1; i < num + 1; i++) {
        obj.push({
          label: i + '',
          value: i + ''
        })
      }
    },
    CallInAutoBusyCountInput(value) {
      if (value <= 1) {
        this.form.CallInAutoBusyCount = 1
      } else if (value >= 99) {
        this.form.CallInAutoBusyCount = 99
      }
    }
  },
  components: {
    Dept,
    affix,
    AgentSelect,
    RoleTransferNew
    // RoleTransfer
  },
  beforeMount() {
    this.forNumber(200, this.maxNumber)
    this.forNumber(50, this.minNumber)
  }
}
</script>
<style lang="stylus" scoped>
@import "../../../../../../assets/common.styl"
select
  margin-top 10px
  width 100%
  height 120px
.unbind
  color $c-email
  cursor pointer
.el-select
  width 70%
  .el-input
    width 100%
.el-input
  width 70%
.bacthTip
  color $c-prompt
.el-form-item
  margin-top 10px
  padding-left 20px
.ui-affix
  margin-top 36px
  padding-bottom 0
.search
  text-align center
  margin-top 20px
</style>
